<%@ page contentType="text/html" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html lang="en" >
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>${functionName}</title>
    <link rel="stylesheet" href="${ctx}/css/bootstrap.min.css">
    <script src="${ctx}/js/jquery.min.js"></script>
    <script src="${ctx}/js/bootstrap.min.js"></script>
    <script src="${ctx}/js/vue.js"></script>
    <link rel="stylesheet" href="${ctx}/css/commontest.css">
    <script src="${ctx}/js/bootstrap-paginator.js"></script>
    <script src="${ctx}/js/msgBlock.js"></script>
    <script src="${ctx}/js/vue2datepicker.js"></script>
    <script src="${ctx}/js/dms-util.js"></script>
    <script src="${ctx}/js/area-maxlength.js"></script>
    <script src="${ctx}/js/dateStr-Util.js"></script>
    <script src="${ctx}/js/common.js"></script>
    <script src="${ctx}/js/changetablewidth.js"></script>
    <link rel="stylesheet" href="${ctx}/css/home.css">
    <link rel="stylesheet" href="${ctx}/css/loader.css">
</head>
<body>

<div class="container">
    <div class="allBorder">
        <div id="app"  v-cloak>

            <v-loader :loadercourt="loadercourt"></v-loader>

            <fieldset>
                <legend>Navbar</legend>
                <v-navbar :menulist="menulist"></v-navbar>
            </fieldset>

            <fieldset>
                <legend>MsgBlock</legend>
                <v-msgblock ></v-msgblock>
                <!-- Delete Warm Msg Modal -->
                <div class="modal fade" id="deleteWarmModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"  @click="closeDeleteModal"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title" id="myModalLabel">Warmming</h4>
                            </div>
                            <div class="modal-body">
                                <v-msgblock :closebutton="false"></v-msgblock>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal" @click="closeDeleteModal">Cancle</button>
                                <button type="button" class="btn btn-primary" data-dismiss="modal"  @click="handleConfirmDelete">Confirm</button>
                            </div>
                        </div>
                    </div>
                </div>
            </fieldset>

            <fieldset>
                <legend>Search</legend>
                <form class="form-horizontal" role="form">
                    <%--   detailDtos:{{detailDtos.length}}-{{detailDtos}}--%>
                    <div class="form-group">
                        <div class="col-md-2 control-label">
                            Internal Agent Code
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control searchInput" v-model="searchdto.internalAgentNo"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-6 "></div>
                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-primary searchButton " @click="handleSearch">Search</button>
                        </div>

                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-success" @click="handleReset">Reset</button>
                        </div>
                    </div>

                </form>
            </fieldset>

            <fieldset>
                <legend>NavTab</legend>
                <div  style="text-align:center">
                <v-navtabheader :navtabs="navtabs" :activetab="activetab"></v-navtabheader>
                <div id="myTabContent"  class="tab-content" style=";height:auto;border-left:1px solid #ddd ;border-bottom:1px solid #ddd ;border-right:1px solid #ddd ;">
                    <div class="tab-pane fade in active" :id="navtabs[0].id">
                        <p>{{navtabs[0].name}}</p>
                    </div>
                    <div class="tab-pane fade" :id="navtabs[1].id">
                        <p>{{navtabs[1].name}}</p>
                    </div>
                    <div class="tab-pane fade" :id="navtabs[2].id">
                        <p>{{navtabs[2].name}}</p>
                    </div>
                </div>
                </div>
            </fieldset>

            <fieldset>
                <legend>Table</legend>

                <v-table
                        :titles="titles" :columnnames="columnnames" :searchdto="searchdto"
                        :sortkeys="sortkeys" :sortbols="sortbols" :url="url"
                        :headers="headers"  :dispalycheckbox="dispalycheckbox" :asnycajax="asnycajax"
                        :tableid="tableid" :pagelimitid="pagelimitid" :exampleid="exampleid" :showpaglimitparam="showpaglimitparam"
                        ref="mychildtable" @rowselected="handleGetChildTableCheckboxArray">
                </v-table>
            </fieldset>

            <fieldset>
                <legend>Operation</legend>
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-primary" @click="handleAdd">Add</button>
                        </div>
                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-primary" @click="handleUpdate">Update</button>
                        </div>
                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-danger" @click="handleDelete">Delete</button>
                        </div>
                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-warning" @click="handleSave">Save</button>
                        </div>
                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-success" @click="handleCancel">Cancel</button>
                        </div>

                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-success" @click="handleCheck">Check1</button>
                        </div>

                        <div class="col-md-1 ">
                            <button type="button" class="btn btn-block btn-success" @click="handleCheck2">Check2</button>
                        </div>
                    </div>
                </form>
            </fieldset>

        </div>
    </div>
</div>

<script type="text/x-template" id="v-table">
    <%--table--%>
    <form class="form-horizontal" role="form">
      <div class="form-group">
          <div class="col-md-12">
              <div class="table-responsive" >
              <table :id="tableid" class="table table-striped table-bordered table-hover table-condensed">
                  <thead>
                  <tr class="thStyle">
                      <th v-if="dispalycheckbox">
                          <input type="checkbox" v-model="isBoxesCheckedAll" @change="changeBoxesCheckedAll" >
                      </th>
                      <th v-for="(th,index) in titles">{{th}}<span v-if="sortbols[index]"><a  @click="handleDescOrAcs(index)" style="text-decoration:none;color:#333 "><span :class="getActiveOfClass(index)"></span></a></span></th>
                  </tr>
                  </thead>
                  <tbody>
                 <tr v-for="(obj,index) in dtos" :class="{selectedRow: handleChangeBgc(index)}"  @click="handleRowSelected(index,obj,$event)" >
                      <td v-if="dispalycheckbox"><input type="checkbox" v-model="boxesChecked" :value="index"></td>
                      <td v-for="(pro,key) in columnnames">{{obj[pro]|formatfunc(pro,key)}}</td>
                  </tr>
                  </tbody>
              </table>
              </div>
          </div>
      </div>

      <div class="form-group">
          <div class="col-md-2" ></div>
          <div class="col-md-8 control-label">
              <div style="text-align: center">Total Pages:{{totalPages}} &nbsp;&nbsp;&nbsp;Total Records:{{totalRecords}}&nbsp;&nbsp;&nbsp;Records per Page: {{pageSize}}</div>
          </div>
          <div class="col-md-2" ></div>
      </div>


        <div class="form-group" v-if="showpaglimitparam" >
            <div class="col-md-2" ></div>
            <div class="col-md-8 control-label">
                <div style="text-align: center">
                    <a  role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample" style="text-decoration:none" @click="handleExpanded" >
                        {{expandedupdown}}
                    </a>
                </div>
            </div>
            <div class="col-md-2" ></div>
        </div>

        <div class="collapse" id="collapseExample">
            <div >
                <div class="form-group" >
                    <div class="col-md-3" ></div>
                    <div class="col-md-1 control-label">
                        currentPage:
                    </div>
                    <div class="col-md-1">
                        <input type="text" placeholder="1" class="form-control" v-model="currentPage" onkeyup = "value=value.replace(/[^\d]/g,'')"/>
                    </div>

                    <div class="col-md-1 control-label">
                        numberOfPages:
                    </div>
                    <div class="col-md-1">
                        <input type="text" placeholder="5" class="form-control" v-model="numberOfPages" onkeyup = "value=value.replace(/[^\d]/g,'')"/>
                    </div>

                    <div class="col-md-1 control-label">
                        pageSize:
                    </div>
                    <div class="col-md-1">
                        <input type="text" placeholder="10" class="form-control" v-model="pageSize" onkeyup = "value=value.replace(/[^\d]/g,'')"/>
                    </div>
                </div>
            </div>
        </div>

      <div class="form-group">
          <div class="col-md-2" ></div>
          <div class="col-md-8 control-label">
              <div :id="exampleid" style="text-align: center">
                  <ul :id="pagelimitid"></ul>
              </div>
          </div>
          <div class="col-md-2" ></div>
      </div>

    </form>
   <%--   test:{{boxesChecked}}--%>
</script>

<script type="text/x-template" id="v-msgblock">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <div class="col-md-12">
                    <div :class="handleTypeInfo(obj.errorCode)" style="padding :0px ;margin-bottom: 0px" v-for="(obj,index) in codeMessages">
                        <a href="#" class="close" @click="handleColseInfo(index)" v-if="closebutton">&times;</a>
                        <strong>{{obj.errorCode + " - " + obj.message}}</strong>
                    </div>
                </div>
            </div>
        </form>
</script>

<script type="text/x-template" id="v-navbar">
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <div class="col-md-12">
                <nav class="navbar  navbar-inverse" >
                    <div class="container-fluid" >
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="#">Brand</a>
                        </div>

                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-stopPropagation="true" >
                            <ul class="nav navbar-nav nav-font-main" v-html="showall(menulist.menulist,0)" >
                                <%--your menu--%>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </form>
</script>

<script type="text/x-template" id="v-loader">
    <div>
        <div>
            <div class="modal" id="smallLoaderDialog" tabindex="-1" role="dialog" aria-labelledby="mainCreateLab"
                 aria-hidden="true" data-backdrop="static" data-keyboard="false" >
                <div class="modal-dialog" style="width: 300px;margin-top: 20%;">
                    <div class="modal-content">
                        <div class="modal-body">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <div class="col-md-12 ">
                                        <div class="smallloader"></div>
                                    </div>
                                    <div class="col-md-12 " style="text-align: center">
                                        processing...
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="modal fade" id="timeOutDialog" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog" style="width: 60% ;margin-top: 20%;">
                    <div class="modal-content">
                        <div class="modal-body">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <div class="col-md-12 " style="text-align: Left;font-size:16px;font-weight:bold;">
                                        Time Out!
                                    </div>
                                    <div class="col-md-12 " style="text-align: Left;margin-top:5px;color:#848482;">
                                        Please login again.
                                    </div>
                                    <div class="col-md-12 " style="text-align: Right;margin-top:25px">
                                        <a href="/logout" style="font-size:14px;font-weight:bold;text-decoration: none;">CONFIRM</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</script>

<script type="text/x-template" id="v-navtabheader">
    <ul id="myTab" class="nav nav-tabs" style="text-align:center">
        <li :style="{'width':tabwidth+'%'}" :class="activetab==index?'active':''"   v-for="(item,index) in navtabs"><a :href="'#'+item.id" rel="external nofollow" data-toggle="tab" @click="handleLi(item.id)">{{item.name}}</a></li>
    </ul>
</script>

<script>
//非父子组件通信 公共bus
var bus=new Vue();

 //标签页
 Vue.component('v-navtabheader',{
     props:{
         navtabs:{
             type:Array,
             default:function () {
                 return [];
             },
         },


         activetab:{
             type:Number,
             default:0,
         },


     },
     template:'#v-navtabheader',
     data:function(){
         return {
             tabwidth:20
         }
     },
     watch: {

     },

     mounted:function(){

     },

     methods:{
         handleLi:function (arg) {
             console.log('click '+arg);
         },

     },
 });

//加载进度圈
 Vue.component('v-loader',{
     props:{
         loadercourt:{
             type:Number,
             default:300,
         }
     },
     template:'#v-loader',
     data:function(){
         return {

         }
     },
     watch: {

     },

     mounted:function(){
         ajaxAop(this.loadercourt);
     },

     methods:{

     },
 });

//导航条
 Vue.component('v-navbar',{
     props:{
         menulist:{
             type:Object,
             required:false,
         },
     },
     template:'#v-navbar',
     data:function(){
         return {
             navmenu:'',
         }
     },
     watch: {

     },

     mounted:function(){

     },

     methods:{
         showall:function (menu_list,count) {
             count++;
             var context='';
             for(var menu in menu_list){
                if(menu_list[menu].menulist.length > 0){
                    var li='<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="border-right: 1px solid #FFF;">'+menu_list[menu].MName+'<span class="caret"></span></a>'+'replacetext'+'</li>';
                    if(count>1){
                        context=context+li.replace('replacetext','<ul class="dropdown-menu nav-font-sub" style="left: 80%;top: 0;">'+this.showall(menu_list[menu].menulist,count)+'</ul>');
                    }else{
                        context=context+li.replace('replacetext','<ul class="dropdown-menu nav-font-sub" >'+this.showall(menu_list[menu].menulist,count)+'</ul>');
                    }
                }else{
                    var li='<li><a href="###" class="bgcdefalut" onclick="javascript:handleCallMethod(\'menuID\')" style="border-right: 1px solid #FFF;">'+menu_list[menu].MName+'</a></li>';
                    li=li.replace('###',menu_list[menu].Url).replace('bgcdefalut',menu_list[menu].Other).replace('menuID',menu_list[menu].MID);
                    context=context+li;
                }
             }
             return context;
         },


     },
 });

//处理error 提示信息
Vue.component('v-msgblock',{
    props:{
        closebutton:{type:Boolean,default:true},
    },
    template:'#v-msgblock',
    data:function(){
        return {
            codeMessages:[],
            //Error Msg ,Warm Msg,Success Msg;
             commonMessage:[
                 {errorCode: "I-CMN-001", message: "Saved successfully"},
                 {errorCode: "W-CMN-001", message: "Are you sure to delete  {{#}}?"},
                 {errorCode: "E-CMN-001", message: "{{#}} should after {{#}}"},
                 {errorCode: "E-CMN-002", message: "{{#}} should bigger than {{#}},would you input another {{#}}?"},
             ],

        }
    },
    watch: {

    },

    mounted:function(){
        var _this=this;
        bus.$on('on-message',function(msg){
            _this.handleErrorMsg(msg);
        });

        bus.$on('clear-message',function(msg){
            _this.codeMessages=msg;
        });

        bus.$on('display-message',function(msg,array){
            _this.handdleDisplayMsg(msg,array);
        });
    },


    methods:{

        handleErrorMsg:function(respmsg){
            if(respmsg==''||respmsg==null){return};
            this.codeMessages=[];
            this.codeMessages=respmsg.responseJSON;
        },

        handdleDisplayMsg:function(msg,array){
            if(array==null||array==''||array==[]){return;}
            var len=array.length;
            if(len<0){return;}
            var errorCode=msg;
            var errormsgArray=this.commonMessage.concat();
            for(var i=0;i<errormsgArray.length;i++){
                    if(errormsgArray[i].errorCode==errorCode){
                        var errorObj={errorCode: "", message: ""};
                        errorObj.errorCode=errormsgArray[i].errorCode;
                        var message=errormsgArray[i].message;
                        for(var j=0;j<len;j++){
                           message=message.replace('{{#}}',array[j]);//only replace first one
                        }
                        errorObj.message=message;
                        this.codeMessages=[];
                        this.codeMessages[0]=errorObj;
                        break;
                    }
            }
        },

        handleTypeInfo:function(initialarg){
             var initial=initialarg.charAt(0);
             var intoType='';
            switch(initial) {
                case 'W':
                    intoType = 'alert alert-warning';
                    break;
                case 'I':
                    intoType = 'alert alert-success';
                    break;
                case 'E':
                    intoType = 'alert alert-danger';
                    break;
                default:
                    intoType = 'alert alert-info';
            }
            return intoType;

        },

        handleColseInfo:function (index) {
            this.codeMessages.splice(index, 1);
        }

    },
});

//表格子组件
Vue.component('v-table',{
    props:{
        titles:{
            type:Array,
            required:true,
        },
        columnnames:{
            type:Array,
            required:true,
        },
        sortkeys:{
            type:Array,
            required:true,
        },
        sortbols:{
            type:Array,
            default:function () {
                return [];
            }
        },
        searchdto:{type:Object,required:false},
        url:{type:String, required:true},
        headers:{type:Object, required:false},
        dispalycheckbox:{type:Boolean,default:true},
        asnycajax:{type:Boolean,default:true},
        tableid:{type:String, default:'tableResult'},
        pagelimitid:{type:String, default:'pageLimit'},
        exampleid:{type:String, default:'example'},
        showpaglimitparam:{type:Boolean,default:false},
    },
    template:'#v-table',
    data:function(){
        return {
            sortStr:'',     // order by sortStr
            sortkeyStr:'',// which <a>
            totalPages:0,
            totalRecords:0,//
            pageSize:10,//
            numberOfPages:5,//
            currentPage:1,//
            dtos:[],
            activeIndex:null,
            isBoxesCheckedAll:false,
            boxesChecked:[],

            expandedupdown:'∨',

            sortState:null,
        }
    },

    watch: {
        boxesChecked: function () {
            if (this.dtos.length != this.boxesChecked.length) {
                this.isBoxesCheckedAll = false
                this.activeIndex=null;
            } else {
                this.isBoxesCheckedAll = true
            }

            if(this.dtos.length ==0&& this.boxesChecked.length==0){
                this.isBoxesCheckedAll = false
                this.activeIndex=null;
            }

            var list=[];
            for(var i=0;i<this.boxesChecked.length;i++){
                list.push(this.dtos[this.boxesChecked[i]]);
            }
           var detailDtos=list.concat();
            this.$emit('rowselected',detailDtos);
        },


    },

    computed: {
    },

    filters:{

    },

    methods:{
        searchList:function (pageNum) {
            var _this=this;
            var pageBean={
                pageSize:this.pageSize,
                sortStr:this.sortStr,
            };

            if (typeof(pageNum) == "undefined" || typeof(pageNum) == "object"||pageNum == null|| pageNum=='') {
                pageBean.pageNum= this.currentPage;
            } else {
                pageBean.pageNum = pageNum;
            }
            pageBean.pageData=this.searchdto;
            this.boxesChecked=[];
            $.ajax({
                url:_this.url,
                type: "post",
                async: _this.asnycajax,
                headers:_this.headers,
                data:JSON.stringify(pageBean),
                dataType:'json',
                error:function(error){
                  // getErrorMsgByJq(error,'msgBlock');
                    bus.$emit('on-message',error);

                },
                success:function(data){;
                    _this.dtos=data.list;
                    _this.totalPages=data.pages;//
                    _this.totalRecords=data.total;//
                    _this.currentPage=data.pageNum;//
                    _this.pageDom(data.pageNum,data.pages);
                }
            });
        },

        pageDom:function (currentPage,totalPages) {
            var _this=this;
            var bootstrapCurrentPage=currentPage;
            var bootstrapTotalPages=totalPages;
            var bootstrapNumberOfPages= this.numberOfPages;
            if(this.totalPages==0){
                bootstrapTotalPages=1;
            }
            var options={
                bootstrapMajorVersion:3,
                currentPage:bootstrapCurrentPage,
                numberOfPages:bootstrapNumberOfPages,
                totalPages:bootstrapTotalPages,
                onPageClicked:function(e,originalEvent,type,page){
                    _this.searchList(page);
                }
            };
            var id=this.pagelimitid;
            $("#"+id).bootstrapPaginator(options);
        },

        handleDescOrAcs:function(index){
            if(this.sortState==null){
                this.sortState='desc';
            }else if(this.sortState=='desc'){
                this.sortState='asc';
            }else if(this.sortState=='asc'){
                this.sortState='desc'
            }else{this.sortState=null;}

            this.sortkeyStr=this.sortkeys[index]+' '+this.sortState;
            this.sortStr= this.sortkeyStr;
            this.searchList(this.currentPage);
        },

        getActiveOfClass:function(index){
            var result='glyphicon glyphicon-sort';
           if(this.sortkeyStr == this.sortkeys[index]+' '+this.sortState){
               if(this.sortState=='desc'){
                   result='glyphicon glyphicon-sort-by-attributes-alt';
               }else if(this.sortState=='asc'){
                   result='glyphicon glyphicon-sort-by-attributes';
               }
           }
            return result;

        },

        changeBoxesCheckedAll:function () {
            if(this.isBoxesCheckedAll){
                var len=this.dtos.length;
                this.boxesChecked=[];
                for(var i=0;i<len;i++){
                    this.boxesChecked.push(i);
                }
            }else {
                this.boxesChecked=[];
            }
        },

        isContainArray:function (arr,value) {
            for(var i = 0; i < arr.length; i++){
                if(value === arr[i]){
                    return true;
                }
            }
            return false;
        },

        handleChangeBgc:function (index) {
            if(index==this.activeIndex)return true;
            return this.isContainArray(this.boxesChecked,index);
        },

        handleRowSelected:function(index,detail,event){
            this.activeIndex=index;
            //this.detailDto=detail;
            var state = event.target.checked;
            if (typeof(state) == "undefined") { // click td
                if(!this.isContainArray(this.boxesChecked,index)){
                    this.boxesChecked.push(index);
                }else if(this.isContainArray(this.boxesChecked,index)){
                    this.boxesChecked.splice($.inArray(index,this.boxesChecked),1);
                }else{}
            }
            if(state ==true){ // click checkbox
                this.activeIndex=index;
            }else if(state ==false){
                this.activeIndex=null;
            }else{}

            if(this.dispalycheckbox!=true){// no checkBox
                this.activeIndex=index;
                this.boxesChecked=[];
                this.boxesChecked.push(index);
            }
        },

        clearTable:function(){
            this.dtos=[];
            this.activeIndex=null,
            this.isBoxesCheckedAll=false;
            this.boxesChecked=[];
        },

        clearRowSelected:function () {
            this.activeIndex=null,
            this.isBoxesCheckedAll=false;
            this.boxesChecked=[];
        },

        handleExpanded:function () {
            this.expandedupdown=this.expandedupdown=='∧'?'∨':'∧';
        }


    }
});

//根对象
var app=new Vue({
    el:'#app',
    data:{
        titles:['Internal Agent Code','Agent Name','Channel','Policy Number','Business Line','Type','Effective Date (DD/MM/YYYY)','Coverage','Action','Status'],
        columnnames:['internalAgentNo','agentName','channelCode','policyNo','linedesc','type','adjDateFormat','coverage','action','approvalStatusDisplay'],
        sortkeys:['0','1','2','3','4','5','6','7','8','9'],
        sortbols:[false,false,false,true,true,true,true,false,true,true],
        searchdto:{internalAgentNo:'21255'},
        url:'${ctx}/policyItemAdjustment/searchPolicyItemAdjustmenttest',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'JWT fefege...'
        },
        dispalycheckbox:true,
        asnycajax:true,
        tableid:'tableResult',
        pagelimitid:'pageLimit',
        exampleid:'example',
        showpaglimitparam:true,

        detailDtos:[],
        action:'',
        menulist :{
            "menulist": [{
                "MID": "M001",
                "MName": "首页",
                "Url": "#",
                "Other":'#',
                "menulist": ""
            },
                {
                    "MID": "M002",
                    "MName": "车辆买卖",
                    "Url": "#",
                    "Other":'#',
                    "menulist": [{
                        "MID": "M003",
                        "MName": "新车",
                        "Url": "#",
                        "Other":'#',
                        "menulist": [{
                            "MID": "M006",
                            "MName": "奥迪",
                            "Url": "#",
                            "Other":'#',
                            "menulist": [{
                                "MID": "M006",
                                "MName": "奥迪1",
                                "Url": "https://www.baidu.com/",
                                "Other":'camUFunction',
                                "menulist": ""
                            },
                                {
                                    "MID": "M007",
                                    "MName": "奥迪2",
                                    "Url": "https://www.taobao.com/",
                                    "Other":'camFunction',
                                    "menulist": ""
                                }
                            ]
                        },
                            {
                                "MID": "M007",
                                "MName": "别克",
                                "Url": "https://www.qq.com/",
                                "Other":'#',
                                "menulist": ""
                            }
                        ]
                    },
                        {
                            "MID": "M004",
                            "MName": "二手车",
                            "Url": "#",
                            "Other":'#',
                            "menulist": ""
                        },
                        {
                            "MID": "M005",
                            "MName": "改装车",
                            "Url": "#",
                            "Other":'#',
                            "menulist": ""
                        }
                    ]
                },
                {
                    "MID": "M006",
                    "MName": "宠物",
                    "Url": "#",
                    "Other":'#',
                    "menulist": [{
                        "MID": "M003",
                        "MName": "家猫",
                        "Url": "#",
                        "Other":'#',
                        "menulist": [{
                            "MID": "M006",
                            "MName": "波斯猫",
                            "Url": "#",
                            "Other":'#',
                            "menulist": ""
                        },
                            {
                                "MID": "M007",
                                "MName": "狮子",
                                "Url": "#",
                                "Other":'#',
                                "menulist": ""
                            }
                        ]
                    },
                        {
                            "MID": "M004",
                            "MName": "狗",
                            "Url": "#",
                            "Other":'#',
                            "menulist": ""
                        },
                        {
                            "MID": "M005",
                            "MName": "鹦鹉",
                            "Url": "#",
                            "Other":'#',
                            "menulist": ""
                        }
                    ]
                }
            ]
        },
        loadercourt:60*60*24,
        navtabs:[{name:'保单',id:'baodan'},{name:'客户',id:'kehu'},{name:'理赔',id:'lipei'},{name:'收付',id:'shoufu'}],

        activetab:2,


    },
    watch:{

    },

    filters:{

    },

    mounted:function() {

    },
    methods:{

        handleSearch:function () {
            this.$refs.mychildtable.searchList();
        },

        handleGetChildTableCheckboxArray:function(detailDtos){
            this.detailDtos=detailDtos;
        },

        handleReset:function () {
            this.searchdto={};
            this.$refs.mychildtable.clearTable();// father children communication
            bus.$emit('clear-message',[]);      // not father chilren communication
        },


        handleAdd:function(){
            this.searchdto={};
            this.$refs.mychildtable.clearTable();
            this.action="Add";
            console.log(this.action);
            this.testAddSucess();

        },

        handleUpdate:function(){
            this.action="Update";
            console.log(this.action);
            bus.$emit('display-message',"I-CMN-001",null);
        },

        handleDelete:function () {
            console.log(this.detailDtos);
            this.action="Delete";
            console.log(this.action);

            bus.$emit('display-message',"W-CMN-001",["PloicyItemAdjustment"]);
            $('#deleteWarmModal').modal('show')
        },

        closeDeleteModal:function () {
            bus.$emit('clear-message',[]);
        },


        handleConfirmDelete:function () {
            console.log('handleConfirmDelete');
        },

        handleSave:function(){
          this.testAddValid();
        },

        handleCancel:function(){
            this.$refs.mychildtable.clearRowSelected();
        },

        handleCheck:function () {
            bus.$emit('display-message',"E-CMN-001",["EndDate","StartDate"]);
        },

        handleCheck2:function () {
            bus.$emit('display-message',"E-CMN-002",["Ele","Rat","Animal"]);
        },




        testAddValid:function(){
            var data={};
            var _this=this;
            $.ajax({
                url:'${ctx}/policyItemAdjustment/createPolicyItemAdjustmenttest',
                type: "post",
                headers:_this.headers,
                data:JSON.stringify(data),
                dataType:'json',
                async: true,
                error:function(error){
                    bus.$emit('on-message',error);
                },
                success:function(data){
                }
            });
        },


        testAddSucess:function(){
            var data={};
            var _this=this;
            $.ajax({
                url:'${ctx}/policyItemAdjustment/addtest',
                type: "post",
                headers:_this.headers,
                data:JSON.stringify(data),
                dataType:'json',
                async: true,
                error:function(error){
                    bus.$emit('on-message',error);
                },
                success:function(data){
                }
            });
        },



    }
});

//全局过滤器
Vue.filter('formatfunc', function (value,key) {
    var resultValue=null;
    switch(key) {
        case 'channelCode':
            resultValue=value+' c'
            break;
        case 'type':
            resultValue=value+'  dd'
            break;
        default:
            resultValue=value;

    }
    return resultValue;//
});

//改变表格单元格宽度
changeTableWidth(app.$data.tableid)

//导航条 自定义处理函数
$(function () {//悬浮打开下拉菜单
    $(".dropdown").mouseover(function () {
        $(this).addClass("open");
    });

    $(".dropdown").mouseleave(function(){
        $(this).removeClass("open");
    })

});
$("body").on('click','[data-stopPropagation]',function (e) {//禁止关闭下拉菜单
    e.stopPropagation();
});
 function handleCallMethod(arg) {
     console.log('handleCallMethod-'+arg);
 }

 //加载进度条 ajax切面
function ajaxAop(loadercourt){
    console.log('loadercourt:'+loadercourt);
    var timer = 0;
    var myVar;
    $(document)
        .ajaxSend(function() {
            clearTimeout(myVar);
            if (timer == 0){
                $("#smallLoaderDialog").modal('show');
            }
            timer++;

            var networkState = navigator.onLine;
            if(!networkState){
                alert("Not internet connection");
                return false;
            }
        })
        .ajaxComplete(function () {
            if (timer > 0 ) timer--;
            if (timer != 0) {return;}

            $("#smallLoaderDialog").modal("hide");
            clearTimeout(myVar);
            myVar = setTimeout(function(){
                    $("#timeOutDialog").modal('show');
                }, loadercourt*1000);
        }).ajaxError(function () {
        if (timer > 0 ) timer--;
        if (timer != 0) {return;}
        $('#smallLoaderDialog').modal('hide');
        clearTimeout(myVar);
        myVar = setTimeout(function(){
                $("#timeOutDialog").modal('show');
            },loadercourt*1000);
    });
}

</script>


</body>
</html>

